<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>div画连续点</title>
  
  <style>
    body{
      margin: 0;
    }
    #canvas{
      background: red;
      height: 100vh;
      position: relative;
    }
  </style>
</head>
<body>
  <div id='canvas'></div>
</body>
<script>
    var div = document.getElementById('canvas');
var painting = false;

div.onmousedown = function(a){
  painting = true;
  var x = a.clientX;
  var y = a.clientY;
  var divA = document.createElement('div');
  divA.style = "width: 6px; height: 6px;"+
    "background: black; border-radius: 3px;"+
    "position: absolute; left: "+(x-3)+"px;"+
    "top: "+(y-3)+"px;"
  
  div.appendChild(divA);
}

div.onmousemove = function(a){
  if(painting){
    var x = a.clientX;
    var y = a.clientY;
    var divA = document.createElement('div');
    divA.style = "width: 6px; height: 6px;"+
    "background: black; border-radius: 3px;"+
    "position: absolute; left: "+(x-3)+"px;"+
    "top: "+(y-3)+"px;"
  
  div.appendChild(divA);
  }else{
    
  }
  
}

div.onmouseup = function(){
  painting = false;
}
</script>
</html>